<template>
    <div>
        <el-card style="max-width: 88%">
            <template #header>
                <div class="card-header">
                    <h3>店铺属性</h3>
                </div>
            </template>
            <el-form style="max-width: 600px" :model="shopDate" class="demo-ruleForm"
                label-width="100px">
                <el-form-item label="店铺名称" prop="shopName">
                    <el-input v-model="shopDate.shopName" placeholder="请输入店铺名称" />
                </el-form-item>
                <el-form-item label="店铺地址" prop="shopAddress">
                    <el-input v-model="shopDate.shopAddress" placeholder="请输入店铺地址" />
                </el-form-item>
                <el-form-item label="店铺图片" prop="shopImg">
                    <el-upload
                        class="avatar-uploader"
                        action="http://127.0.0.1:8080/emp/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="shopDate.shopImg" :src="shopDate.shopImg" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <span class="iconfont icon-shurukuang-shangchuantupian"></span>
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="店铺分类" prop="shopCategoryId">
                    <el-select v-model="shopDate.shopCategoryId" placeholder="请选择类别">
                        <el-option v-for="item in shopCategory" :label="item.categoryName" :value="item.shopCategoryId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="起送费" prop="startPrice">
                    <el-input-number v-model="shopDate.startPrice" :precision="2" :step="0.1" :max="10" />
                </el-form-item>
                <el-form-item label="配送费" prop="deliveryPrice">
                    <el-input-number v-model="shopDate.deliveryPrice" :precision="2" :step="0.1" :max="100" />
                </el-form-item>
                <el-form-item label="营业开始时间" prop="startTime">
                    <el-time-select v-model="shopDate.startTime" style="width: 240px" :max-time="shopDate.endTime"
                        class="mr-4" placeholder="营业开始时间" start="08:30" step="00:15" end="18:30" />
                </el-form-item>
                <el-form-item label="营业结束时间" prop="endTime">
                    <el-time-select v-model="shopDate.endTime" style="width: 240px" :min-time="shopDate.startTime"
                        placeholder="营业结束时间" start="08:30" step="00:15" end="18:30" />
                </el-form-item>
                <el-form-item label="店铺介绍" prop="shopExplain">
                    <el-mention v-model="shopDate.shopExplain" type="textarea" style="width: 500px" placeholder="介绍一下自己的店铺" />
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-mention v-model="shopDate.remarks" type="textarea" style="width: 500px" placeholder="备注" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addShop()">
                        提交
                    </el-button>
                    <el-button @click="">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import * as shopApi  from '@/api/shop.js'
export default {
    data() {
        return {
            shopDate: {
                shopName: "",
                shopAddress: "",
                shopExplain: "",
                shopImg: "",
                shopCategoryId: "",
                startPrice: "",
                deliveryPrice: "",
                remarks: "",
                status:0,
                startTime: "",
                endTime: "",
                recommend: 0
            },

            // 加载店铺类别的数据
            shopCategory:[],

            // 存放接收到的本地存储数据
            businessInfo: {},


        }
    },
    methods: {
        // 上传图片
        // 文件上传成功
        handleAvatarSuccess(res) { 
            this.shopDate.shopImg = res;
         },


        loadShopCategory(){
            shopApi.shopTypeApi({op:"get"}).then(resp => {
                this.shopCategory = resp.data;
            })
        },

        // 添加按钮
        addShop() {
            // 需要从本地存储中，获取到商家信息，从其中拿到商家id
            this.shopDate.businessId = this.businessInfo.id;
            shopApi.addShopApi({...this.shopDate,op:"add"}).then(resp => {
                ElNotification({
                    title: '添加成功',
                    message: '添加成功',
                    type: 'success',
                });
            })
        },
    },
    // 初始化加载数据信息到页面
    created(){
        // 从本地存储中获取商家登录的信息
        let info = sessionStorage.getItem("business");
        if(!info){
            // 从本地存储中没有获取到商家id，说明商家没有登录，返回到登录页面
            this.$router.push('/busLogin');
        }
        this.businessInfo = JSON.parse(info); 
        this.loadShopCategory();
    },
}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 150px;
    height: 150px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>




                
                
                
                
